<template>
  <div class="bgc_white" id="reset_forget" :style="'min-height: '+ height">
    <el-form  :model="form" :rules="rules" ref="form" >
      <p class="title">{{$t('PASSWORD.RESETPASSWORD')}} </p>
      <p>{{$t('PASSWORD.ENTERPASSWORD')}}</p>
      <!-- <p class="formTitle">{{$t('DEFAULT.PASSWORD')}} </p> -->
      <p class="formTitle">{{$t('DEFAULT.NEWPASSWORD')}} </p>

      <el-form-item  prop="password">
        <el-input  v-model="form.password"  :type="showPsw" >
          <i @click="isPswShow" slot="suffix" :class="showPsw == 'password' ? 'icon-nondisplay_normal iconfont': 'iconfont icon-display_normal'  "></i>

        </el-input>
      </el-form-item>
      <!-- <p class="formTitle">{{$t('DEFAULT.CONFIRMPSW')}} </p>-->
      <p class="formTitle">{{$t('PASSWORD.CONFIRMPASSWORD')}}</p>
      <el-form-item  prop="confirmPwd">
        <el-input  v-model="form.confirmPwd"  :type="showConfirmPsw">
          <i @click="isConfirmPswShow" slot="suffix" :class="showConfirmPsw == 'password' ? 'icon-nondisplay_normal iconfont': 'iconfont icon-display_normal'  "></i>
        </el-input>
      </el-form-item>
      <el-button @click="submitForm()"  :loading="isRequest" :class="{'isFull': isFull}">{{$t('PASSWORD.CONFIRM')}}</el-button>

    </el-form>
  </div>
</template>

<script>
import { setPassword } from "@/api/common/password.js";
import { getUrlItem , setHeight} from "@/utils/index.js"

export default {
  data() {
    const validatePsw = (rule, value, callback) => {
      if (value === '' || value.length < 6 || value.length > 12) {
        callback(new Error(this.$t('DEFAULT.MSGPWSLEN')));
      } else if (this.form.password && this.form.confirmPwd && this.form.password  !== this.form.confirmPwd) {
        callback(new Error(this.$t('DEFAULT.MSGOSWDIFF')))
      }else {
        callback()
      }
    };
    return {
      height: '',
      showPsw: 'password',
      showConfirmPsw: 'password',
      isRequest: false,

      form: {
        id:'',
        password: '',
        confirmPwd: '',
        token: ''
      },
      rules: {
        password: [
          { required: true,trigger: 'blur' , validator: validatePsw},
          { min: 6, max: 12, message: this.$t('DEFAULT.MSGPWSLEN'), trigger: 'blur' }
        ],
        confirmPwd: [
          { required: true, trigger: 'blur' , validator: validatePsw},
          { min: 6, max: 12,  trigger: 'blur' ,message: this.$t('DEFAULT.MSGPWSLEN')}
        ]
      }
    }
  },
  computed :{
    isFull () {
      let isFull = false
      let password = this.form.password.length > 0
      let confirmPwd = this.form.confirmPwd.length > 0
      if (password && confirmPwd){
        this.$refs.form.validate((valid) => {
          if(valid){
            isFull =  true
          } 
        })
      } 
      return isFull
    }
  },
  mounted(){
    this.form.token = getUrlItem('token')
    this.form.id = getUrlItem('id')
    this.height = setHeight()
  },
  methods: {
    isPswShow () {
      if(this.showPsw == 'password'){
        this.showPsw = 'text'
      } else {
        this.showPsw = 'password'
      }
    },
    isConfirmPswShow () {
      if(this.showConfirmPsw == 'password'){
        this.showConfirmPsw = 'text'
      } else {
        this.showConfirmPsw = 'password'
      }
    },
    submitForm () {
      console.log('调用重置密码接口')
      
       this.$refs.form.validate((valid) => {
          if(valid){
           this.setPassword()
          } 
        })
    },
    setPassword() {
      this.isRequest = true
      let params = this.form
      setPassword(params).then(res=>{
        if(res.state ==1 ){
          this.$router.push("/reset_password_success")
        }
        this.isRequest = false
      })
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/register/password.scss';

</style>